<template>
    <div class="quote" v-show="visible">
        <div class="quote-body">
            <div class="owner">{{ message.owner }}</div>
            <div class="quote-content">
                <div class="image" v-if="is_img_type">
                    <img :src="msg" class="viewer-img" title="点击查看" />
                </div>
                <div class="text" v-else v-html="msg"></div>
            </div>
        </div>
        <div class="close-quote-btn" @click="handleClose">
            <i class="el-icon-circle-close"></i>
        </div>
    </div>
</template>

<script setup>
import { reactive, toRefs, computed } from "vue"
import config from "../../../config"

const props = defineProps({
    message: {
        type: Object,
        required: true,
    },
    visible: {
        type: Boolean,
        default: true,
    }
})

const handleClose = () => {
    context.emit("update:visible", false)
}

const is_img_type = computed(() => {
    return props.message.type == 3
})

const msg = computed(() => {
    if (!props.message.content) {
        return null
    }
    if (is_img_type.value) {
        return config.apiUrl + props.message.content
    } else {
        return props.message.content.replace(/\[em_([0-9]*)\]/g, '<img src="/public/face/$1.gif"/>')
    }
})

// const { } = toRefs(state)

</script>

<style scoped>
.quote {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    /* min-height: 50px; */
    padding: 10px 20px 10px;
    border-top: 1px solid #ebebeb;
    /* box-shadow: 0 1px 3px rgb(18 18 18 / 10%); */
}

.quote-body {
    border-left: 2px solid #ebebeb;
    padding-left: 5px;
}
.quote .quote-body .owner {
    font-size: 12px;
    color: #999;
}
.quote .quote-body .quote-content {
    font-size: 14px;
    margin-top: 3px;
    color: #757575;
}
.close-quote-btn {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 18px;
}
.image img {
    max-height: 70px;
}
</style>